<template>
  <sub-nav class="activity-nav">
    <h1>
        <span>活动</span>
        <a href="#/activity/list" class="fr">返回</a>
    </h1>

    <Menu width="200px"
      :active-name="activeName"
      @on-select="onSelectNav">
      <MenuItem name="plan">活动计划</MenuItem>
      <MenuItem name="group">组别管理</MenuItem>
      <MenuItem name="entry-form">报名表设置</MenuItem>
      <MenuItem name="reward">奖励设置</MenuItem>
      <MenuItem name="road-book">路书设置</MenuItem>
      <MenuItem name="punch-clock">打卡点设置</MenuItem>
      <MenuItem name="back-support">后援设置</MenuItem>
      <MenuItem name="cost-detail">费用明细</MenuItem>
      <MenuItem name="signup">报名名单</MenuItem>
      <MenuItem name="insurance">活动保险</MenuItem>
      <MenuItem name="num-plate">号码牌管理</MenuItem>
      <MenuItem name="ride-package">赛事包管理</MenuItem>
      <MenuItem name="news">其他发布</MenuItem>
      <MenuItem name="photo">活动照片</MenuItem>
      <MenuItem name="message">活动留言</MenuItem>
    </Menu>
  </sub-nav>
</template>

<script>
  import subNav from '@/components/sub-nav'

  export default {
    name: 'activity-nav',
    components: {
      subNav
    },
    data () {
      return {
        activeName: '',
        activityId: this.$route.params.activityId,
        pkInitial: this.$route.params.pkInitial
      }
    },
    methods: {
      onSelectNav (name) {
        this.$router.push({ path: `/activity/${this.activityId}/${this.pkInitial}/${name}` })
      }
    },
    mounted () {
      let matched = this.$route.matched
      this.activeName = matched[1].path.replace('/activity/:activityId/:pkInitial/', '')
    }
  }
</script>

<style lang="less">
  .activity-nav {
  }
</style>
